<template>
  <div class="directory-card" v-if="isTrafficManageUser">
    <div class="card-bar">图层目录</div>
    <details class="content">
      <summary>
        <span class="card-title">地图文档</span>
      </summary>
      <details>
        <summary class="card-header">光谷智慧交通</summary>
        <details>
          <summary class="card-content">新地图1</summary>
          <div class="card-layer-tree" v-for="item in children" :key="item.id">
            <input type="checkbox" :id="item.id" @click="useLayerHttp($event, map)" checked />
            <el-text>
              <template #default>
                <template v-if="item.name === '居民区'"
                  ><img src="../../assets/images/Area.png" alt=""
                /></template>
                <template v-else-if="item.name === '武汉光谷道路'"
                  ><img src="../../assets/images/Line.png" alt=""
                /></template>
                <template v-else-if="item.name === '事件'"
                  ><img src="../../assets/images/Point.png" alt=""
                /></template>
                <template v-else-if="item.name === '摄像头'"
                  ><img src="../../assets/images/monitor.png" alt=""
                /></template>
                <template v-else-if="item.name === '警务室'"
                  ><img src="../../assets/images/location.png" alt=""
                /></template>
                <label for="" :id="item.id">{{ item.name }}</label>
              </template>
            </el-text>
          </div>
        </details>
      </details>
    </details>
  </div>
</template>

<script setup>
import { useGlobalMap } from '../../plugins/globalmap'
import { useNameHttp } from './Hooks/useDirectory'
import { userModules } from '../../stores/userModulsStore'

const isTrafficManageUser = ref(false)
const isLogin = ref(false)
const { userLoginData } = userModules()
onMounted(async () => {
  if (userLoginData.value.user_role) {
    isTrafficManageUser.value = true
  }
  if (userLoginData.value.id) {
    isLogin.value = true
  } else {
    isLogin.value = false
  }
})

const map = ref()
const { children, useLayerHttp } = useNameHttp()

onMounted(async () => {
  map.value = await useGlobalMap()
  window.onload = function () {
    const details = document.querySelectorAll('details')
    details.forEach((targetDetail) => {
      targetDetail.open = true
    })
    const summarys = document.querySelectorAll('summary')
    summarys.forEach((targetSummary) => {
      const triangle = document.createElement('span')
      triangle.innerHTML = '&#9660;'
      triangle.style.marginRight = '5px'
      targetSummary.insertBefore(triangle, targetSummary.firstChild)
      targetSummary.addEventListener('click', () => {
        if (targetSummary.parentNode.className === 'card-layer-tree') {
          return
        }
        triangle.innerHTML = targetSummary.parentNode.open ? '&#9660;' : '&#9654;'
      })
    })
  }
})
</script>

<style lang="less" scoped>
/* 去掉自带的黑三角 */
summary {
  list-style: none;
}
img {
  width: 15px;
}
/* 添加样式 */
.directory-card {
  position: fixed;
  width: 200px;
  top: 100px;
  right: 0px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #333;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  margin: 10px;
  border-radius: 10px;
}

.card-bar {
  // font-weight: bold;
  width: 100%;
  padding: 10px 10px;
  box-sizing: border-box;
  background: skyblue;
  font-size: 20px;
  color: #fff;
  margin-bottom: 10px;
  border-radius: 10px 10px 0 0;
}

summary {
  margin-bottom: 10px;
}
.card-title {
  font-size: 18px;
}

.content {
  padding: 0 10px 10px 5px;
}

span {
  cursor: pointer;
}

.card-header {
  // font-weight: bold;
  font-size: 17px;
  margin-left: 5px;
}

.card-content {
  margin-left: 12px;
}

.card-layer-tree {
  margin-left: 20px;
  margin-bottom: 5px;
}

.card-layer-tree label {
  margin-left: 5px;
}
// .directory-card {
//   margin: 10px;
//   padding: 10px;
//   border: 1px solid #ccc;
//   border-radius: 5px;
// }
</style>
